<template>
	<view class="bottom-box l-f">
		<view class="bottom-box_left l-f l-row-ad l-f3 l-min-w">
			<view class="bottom-box_left_item l-f l-column l-row-c" hover-class="hover-class">
				<image class="bottom-box_left_item_icon" src="@/static/icons/icon-car.png" mode="widthFix"></image>
				<view class="bottom-box_left_item_label">购物车</view>
				<view v-if="cartNum > 0" class="bottom-box_left_item_number">{{cartNum > 99 ? '99+' : cartNum}}</view>
			</view>
			<view class="bottom-box_left_item l-f l-column l-row-c" hover-class="hover-class">
				<image class="bottom-box_left_item_icon" src="@/static/icons/icon-kf.png" mode="widthFix"></image>
				<view class="bottom-box_left_item_label">客服</view>
			</view>
		</view>
		<view class="bottom-box_right l-f l-row-ad l-f6 l-min-w">
			<view @click.stop="onAdd" class="bottom-box_right_item" hover-class="hover-class">加入购物车</view>
			<view @click.stop="onBuy" class="bottom-box_right_item" hover-class="hover-class" style="background-color: #EE3F4D;">立即购买</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps({
		cartNum: {
			type: Number,
			default: 0
		}
	})
	const emits = defineEmits(['add','buy'])
	const onAdd = () => {
		emits('add')
	}
	const onBuy = () => {
		emits('buy')
	}
</script>

<style lang="scss" scoped>
.bottom-box {
	height: 170rpx;
	background-color: #ffffff;
	padding: 30rpx 20rpx;
	box-sizing: border-box;
	border-top: 1rpx solid #f5f5f5;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	&_left {
		&_item {
			position: relative;
			&_icon {
				width: 50rpx;
				height: 50rpx;
			}
			&_label {
				font-size: 28rpx;
				color: #3D3D3D;
				margin-top: 6rpx;
			}
			&_number {
				position: absolute;
				top: -26rpx;
				right: -18rpx;
				z-index: 1;
				background-color: #EE3F4D;
				color: #ffffff;
				padding: 2rpx 8rpx;
				min-width: 46rpx;
				text-align: center;
				border-radius: 24rpx;
				font-weight: 20rpx;
			}
		}
	}
	&_right {
		&_item {
			font-size: 30rpx;
			font-weight: 700;
			color: #ffffff;
			background-color: #F68C60;
			width: 220rpx;
			height: 76rpx;
			line-height: 76rpx;
			border-radius: 38rpx;
			text-align: center;
		}
	}
}
</style>